/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles/tokens' as awsui;
@use '../internal/styles' as styles;
@use './shared' as shared;

.root {
  @include styles.styles-reset;
  word-wrap: break-word;
  position: relative;

  &.fit-height {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    &.with-side-media {
      flex-direction: row;
    }
  }

  &.variant {
    &-default,
    &-stacked {
      background-color: awsui.$color-background-container-content;
      // Border and shadows are applied with ::before and ::after elements (respectively)
      @include styles.container-style;
    }

    // Meld container bottom corners into next adjoining container
    &-stacked:not(:last-child),
    &-stacked:not(:last-child)::before,
    &-stacked:not(:last-child)::after {
      border-end-end-radius: 0;
      border-end-start-radius: 0;
      border-block-end-width: 0;
    }
    // Meld container top corners into preceding container
    &-stacked + &-stacked,
    &-stacked + &-stacked::before,
    &-stacked + &-stacked::after {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
    // Replace container border with a divider
    &-stacked + &-stacked:not(.refresh)::before {
      @include shared.divider;
    }
  }

  // To ensure the top border/divider is visible on sticky elements which have a higher z-index
  &.sticky-enabled:not(.refresh) {
    &::before {
      inset-block-start: calc(-1 * #{awsui.$border-container-top-width});
    }
    &.variant-stacked::before {
      inset-block-start: calc(-1 * #{awsui.$border-divider-section-width});
    }
  }

  &.with-stuck-sticky-header-at-bottom {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }
}

.with-side-media {
  display: flex;
  flex-direction: row;
}

.with-top-media {
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  &-fit-height {
    block-size: 100%;
    overflow: hidden;
    border-end-start-radius: awsui.$border-radius-container;
    border-end-end-radius: awsui.$border-radius-container;
  }
}

.media {
  overflow: hidden;
  flex-shrink: 0;

  // stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type
  img,
  video,
  picture {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  iframe {
    inline-size: 100%;
    block-size: 100%;
    border-block: 0;
    border-inline: 0;
  }
  // stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type

  // reduce border-radius size to fill the visual gap between the parent border and image
  &-top {
    max-block-size: 66%;
    border-start-start-radius: calc(awsui.$border-radius-container - 1px);
    border-start-end-radius: calc(awsui.$border-radius-container - 1px);
  }

  &-side {
    max-inline-size: 66%;
    border-start-start-radius: calc(awsui.$border-radius-container - 1px);
    border-end-start-radius: calc(awsui.$border-radius-container - 1px);
  }
}

.header {
  background-color: awsui.$color-background-container-header;
  border-start-start-radius: awsui.$border-radius-container;
  border-start-end-radius: awsui.$border-radius-container;
  &.header-full-page {
    background-color: awsui.$color-background-layout-main;
  }

  // "embedded" variant is passed to container only from table variants "borderless" and "embedded"
  &-variant-embedded.refresh:not(.header-sticky-enabled) {
    background-color: transparent;
  }

  &.header-with-media {
    background: none;
    &:not(:empty) {
      border-block-end: none;
    }
  }

  // sticky positioning may be disabled (on mobile or if browser does not support it),
  // but some markup still requires a new stacking context
  &-sticky-disabled {
    position: relative;
    z-index: 1;
  }

  &-sticky-enabled {
    inset-block-start: 0;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    position: sticky;
    z-index: 800;
  }

  &-stuck {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;

    &::before {
      border-block: 0;
      border-inline: 0;
    }
    &:not(.header-variant-cards) {
      box-shadow: awsui.$shadow-sticky-embedded;
    }
  }

  &-dynamic-height.header-stuck {
    // to prevent the block from changing its height when variant dynamically changes
    margin-block-end: calc(#{awsui.$line-height-heading-xl} - #{awsui.$line-height-heading-l});
  }

  &:not(:empty) {
    border-block-end: awsui.$border-container-sticky-width solid awsui.$color-border-container-divider;
  }

  &.with-paddings {
    padding-block-start: awsui.$space-container-header-top;
    padding-block-end: awsui.$space-container-header-bottom;
    padding-inline: awsui.$space-container-horizontal;

    &.header-variant-cards {
      padding-block: awsui.$space-container-header-top;
      padding-inline: awsui.$space-container-horizontal;
    }
  }

  &.with-hidden-content {
    border-end-start-radius: awsui.$border-radius-container;
    border-end-end-radius: awsui.$border-radius-container;
  }

  &-variant-cards {
    // Border and shadows are applied with ::before and ::after elements (respectively)
    @include styles.container-style;
    &:not(.header-sticky-enabled) {
      position: relative;
    }

    &.header-stuck::after,
    &.header-stuck::before {
      border-block: 0;
      border-inline: 0;
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
  }

  &-variant-full-page {
    &.header-stuck {
      box-shadow: none;

      > .header-cover {
        background-color: awsui.$color-background-layout-main;
        inline-size: 100%;
        position: absolute;
        block-size: awsui.$space-scaled-s;
        inset-block-start: calc(-1 * awsui.$space-scaled-s);
      }

      &::before {
        content: '';

        position: absolute;
        pointer-events: none;
        inset-inline-end: 0;
        inset-inline-start: 0;
        inset-block-end: 0;
        inset-block-start: 0;
        border-block-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
      }

      &::after {
        content: '';

        position: absolute;
        inset: 0;

        box-shadow: awsui.$shadow-sticky;
        // This polygon only shows the part of the shadow that is lower than the element itself.
        clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
      }
    }
  }
}

.content {
  flex: 1;
  &-fit-height {
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
}
.content-inner {
  flex: 1;

  &.with-paddings {
    padding-block: awsui.$space-scaled-l;
    padding-inline: awsui.$space-container-horizontal;

    &.with-header {
      padding-block-start: awsui.$space-container-content-top;
    }
  }
}

.footer {
  &.with-paddings {
    padding-block: awsui.$space-scaled-s;
    padding-inline: awsui.$space-container-horizontal;
  }

  &.with-divider {
    @include shared.divider;
  }
}
